{extend name="common/main"/}

{block name="body"}
    <div class="index-content-box">
        <div class="">
            <div class="count row clearfix">
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-green">
                        <div class="inner">
                          <h3>{$count.today_action_log}</h3>
                          <p>今日用户行为</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-tasks"></i>
                        </div>
                        <a href="{:url('action/log')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-blue">
                        <div class="inner">
                          <h3>{$count.today_user} </h3>
                          <p>今日新增</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-user"></i>
                        </div>
                        <a href="{:url('member/index')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-yellow">
                        <div class="inner">
                          <h3>{$count.total_user} </h3>
                          <p>总用户</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-bar-chart-alt"></i>
                        </div>
                        <a href="{:url('member/index')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-red">
                        <div class="inner">
                          <h3>{$count.login_users}</h3>
                          <p>今日登录</p>
                        </div>
                        <div class="small-icon-box">
                            <i class="icon icon-group"></i>
                        </div>
                        <a href="{:url('member/index?order=last_login_time')}" class="small-box-footer">
                            更多 <i class="icon-circle-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="index-content-box">    
        <div class="sortblock clearfix">
            <input type="hidden" name="sort_value" value='' />
            <section class="connectedSortable">
                <!--N日用户注册数-->
                <div class="box" data-id="count_xday_reg">
                    <div class="box-header count_common_box">
                        <span class="caption-subject">
                            最近{$count_day}天用户增长
                        </span>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-primary btn-sm" data-widget="collapse"><i class="icon icon-minus"></i></i>
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" data-widget="remove"><i class="icon icon-times"></i>
                            </button>
                            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#settingCount">
                                <i class="icon-cog"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="chart">
                            <canvas id="regMember" style="width:100%;max-height:300px"></canvas>
                        </div>
                    </div>
                </div>
            </section>

            <section class="connectedSortable">
                <div class="box" data-id="system_info">
                    <div class="box-header count_common_box">
                        <span class="caption-subject">系统信息</span>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-primary btn-sm" data-widget="collapse"><i class="icon icon-minus"></i></i>
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" data-widget="remove"><i class="icon icon-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="portlet-body">
                            <table class="table table-bordered table-striped ">
                                <tr>
                                    <th>{:lang('server OS')}</th>
                                    <td>{$Think.const.PHP_OS}</td>
                                </tr>
                                <tr>
                                    <th>运行环境</th>
                                    <td>{$_SERVER['SERVER_SOFTWARE']}</td>
                                </tr>
                                <tr>
                                    <th>PHP</th>
                                    <td>{:phpversion()}</td>
                                </tr>
                                <tr>
                                    <th>{:lang('Mysql version')}</th>
                                    <td>{$mysql_version}</td>
                                </tr>
                                <tr>
                                    <th>上传限制</th>
                                    <td>{:ini_get('upload_max_filesize')}</td>
                                </tr>
                                <tr>
                                    <th>开发框架</th>
                                    <td data-id="version" data-value="{$version}">{$version}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    
    <div class="modal fade" id="settingCount">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">设置</h4>
                </div>
                <div class="modal-body">
                    <label>默认展示天数 </label>
                    <input class="form-control" name="count_day" value="{$count_day}">
                </div>
                <div class="modal-footer">
                    <button class="btn " data-role="saveCountSetting">
                        <i class="icon-ok"></i> {:lang('save')}
                    </button>
                    <button class="btn " data-dismiss="modal">
                        <i class="icon-remove"></i> {:lang('cancel')}
                    </button>
                </div>
            </div>
        </div>
    </div>
{/block}

{block name="script"}
<!-- ChartJS 1.0.1 -->
<script src="/static/common/lib/zui/lib/chart/zui.chart.min.js"></script>
<script>
$(function(){
    $('[data-role="saveCountSetting"]').click(function () {
        var url = "{:url('admin/index/console')}";
        $.post(url, {count_day: $('input[name=count_day]').val()}, function (msg) {
            handleAjax(msg);
        });
    })
});

$(function(){

    var regMemberList = [];

    var url = "{:url('admin/count/reg')}";
    $.post(url, {}, function (res) {
        console.log(res)
        regMemberList = res.data.data;
        chartStart(regMemberList)
    });

    function chartStart(regMemberList){

        //N日用户增长
        var regMemberChartData= {
            labels: regMemberList.days,
            datasets: [
                {
                    fillColor: "rgba(23,182,200,0.2)",
                    strokeColor: "rgba(23,182,200,1)",
                    pointColor: "rgba(23,182,200,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: regMemberList.data
                }
            ]
        }

        var regMember = $("#regMember").lineChart(regMemberChartData,options);
    }
    
    //图表配置项
    var options = {
        ///Boolean - 是否在图表上显示网格
        scaleShowGridLines : true,
        //String - 网格线条颜色
        scaleGridLineColor : "rgba(0,0,0,.05)",
        //Number - 网格宽度
        scaleGridLineWidth : 1,
        //Boolean - 是否显示水平坐标，即X轴
        scaleShowHorizontalLines: true,
        //Boolean - 是否显示垂直坐标，即Y轴
        scaleShowVerticalLines: true,
        //Boolean - 是否显示为平滑曲线
        bezierCurve : true,
        //Number - 平滑曲线时所使用的贝塞尔曲线参数
        bezierCurveTension : 0.4,
        //Boolean - 是否显示顶点
        pointDot : true,
        //Number - 顶点半径，单位像素
        pointDotRadius : 4,
        //Number - 顶点描边线条宽度，单位像素
        pointDotStrokeWidth : 1,
        //Number - 检测鼠标点击所使用依据的半径大小，单位像素
        pointHitDetectionRadius : 20,
        //Boolean - 是否
        datasetStroke : true,
        //Number - 数据集线条宽度，单位为像素
        datasetStrokeWidth : 2,
        //Boolean - 是否用颜色来填充数据集
        datasetFill : true,
    }; // 图表配置项，可以留空来使用默认的配置
});

$(function(){
    // 获取云端最新版本
    var url = "{:url('update/check')}";
    $.get(url, function(res){
        console.log(res);
        if(res.code == 200){
            new $.zui.Messager('云端有新版本可升级', {
                placement: 'bottom-right',
                type: 'danger',
                close: true,
                icon: 'ok-sign',
                time: 0,
                actions: [{
                    name: 'upgrade',
                    icon: 'cloud-upload',
                    text: '立即升级',
                    action: function() {
                        window.location="{:url('admin/Update/index')}"
                    }
                }]
            }).show();
        }
    });
});
</script>
{/block}   
    